<template>
  <div class="queue">
    <a-card class="mb-4" :title="t['下发队列']">
      <div class="flex gc-4 justify-between">
        <div class="flex gap-2">
          <SelectorListSelector
            v-model="query.filterId"
            v-model:store-name="query.storeName"
            :placeholder="t['门店名称']"
            @change="getList"
            class="w-[400px]"
          ></SelectorListSelector>
          <a-input
            allowClear
            @keydown.enter="getList"
            v-model="query.username"
            :placeholder="t['门店账号']"
          ></a-input>
          <a-button @click="refresh" type="primary">{{ t["搜索"] }}</a-button>
        </div>
        <div class="flex gap-2">
          <ExportButton @change="exportFile"></ExportButton>
          <a-dropdown>
            <a-button type="text">
              {{ t["按时间补发"] }}
              <IconDown />
            </a-button>
            <template #content>
              <a-doption
                v-for="(item, key) in reissueTimeList"
                :key="key"
                @click="reissueWithTime(item.value)"
              >
                {{ t[item.label] }}
              </a-doption>
            </template>
          </a-dropdown>
        </div>
      </div>
    </a-card>
    <a-card>
      <a-table
        :pagination="{
          pageSize: tableConfig.pageSize,
          current: query.pageNum,
          total: query.total,
          showTotal: true
        }"
        size="medium"
        :loading="tableLoading"
        :columns="columns"
        :data="tableData"
        @page-change="pageChange"
      >
        <template #progress="{ record }">
          <a-progress :percent="progress(record).percent" :status="progress(record).status" />
        </template>
        <template #status="{ record }">
          <div class="flex gap-2 justify-center">
            <a-tag color="red" bordered>{{ record.timeout }}</a-tag>
            <a-tag color="green">{{ record.suc }}</a-tag>
            <a-tag color="orange">{{ record.wait }}</a-tag>
          </div>
        </template>
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>

        <template #triggerType="{ record }">
          {{
            getOptionLabel({
              options: triggerTypeOptions,
              value: record.triggerType
            })
          }}
        </template>
        <template #actions="{ record }">
          <a-button @click="reissue(record)">{{ t["补发"] }}</a-button>
          <a-button class="mr-2" type="primary" @click="getDetail(record)"
            >{{ t["详情"] }}
          </a-button>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:visible="modelVisible" fullscreen :title="t['下发队列']" @close="reset">
      <DetailsVue ref="detailsRef" :batch-name="batchName"></DetailsVue>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {
  batchReissue,
  exportSendqueue,
  groupsList,
  reissueByTime
} from "@/api/service/sendqueue/sendqueue";
import { QueueGroup } from "@/api/service/sendqueue/types";

import { IQuery } from "@/interface/IAxios";
import { getOptionLabel } from "@/utils/form";

import { ITime, reissueTimeList } from "@/data/options/selection";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";
import { Message } from "@arco-design/web-vue";
import { triggerTypeOptions } from "../lcd-queue/data/options";
import { groupColumns } from "./column";
import DetailsVue from "./details/details.vue";

const t = translate("公共模块");
const tableData = ref<QueueGroup[]>([]);

const detailsRef = ref();
const tableLoading = ref(true);
/* 重发时间列表 */

/* 批次名称 */
const batchName = ref("");

const modelVisible = ref(false);

const query = ref<IQuery>({
  pageNum: 1,
  total: 0,
  pageSize: 20,
  username: "",
  storeName: "",
  scope: ENUM_DATA_SCOPE.THIS_AND_ALL_SUB
});
const exportFile = (data: ITime) => {
  exportSendqueue(data);
};

const refresh = async () => {
  await getList();
};
const reset = () => {
  detailsRef.value.resetQuery();
};
const tableConfig = ref({
  loading: true,
  pageSize: 20
});
const reissueWithTime = async (data: any) => {
  console.log(data);

  await reissueByTime(data.type as any, data.value!, query.value.filterId);
};
const reissue = async (record: QueueGroup) => {
  const { msg } = await batchReissue(record.batchName);
  Message.info(msg);
};

const progress = (record: QueueGroup) => {
  const percent = parseFloat((record.suc / record.total).toFixed(2));
  let status: any = "default";
  if (percent < 0.3) {
    status = "danger";
  } else if (percent < 0.6) {
    status = "warning";
  } else {
    status = "success";
  }

  return {
    percent,
    status
  };
};
const getList = async () => {
  tableLoading.value = true;
  const { rows, total } = await groupsList({
    ...query.value,
    filterId: ""
  });
  tableData.value = rows;
  tableConfig.value.loading = false;
  query.value.total = total;
  tableLoading.value = false;
};
const pageChange = (index: number) => {
  query.value.pageNum = index;
  getList();
};
onMounted(() => {
  getList();
});

const getDetail = async (record: QueueGroup) => {
  modelVisible.value = true;
  batchName.value = record.batchName;

  if (detailsRef.value) {
    detailsRef.value.getListByBatchName(record.batchName);
  }
};
const columns = computed(() => {
  return groupColumns.map((e) => {
    e.align = "center";
    e.slotName = e.dataIndex;
    e.title = t.value?.[e.title as string] || e.title;

    return e;
  });
});
</script>

<style lang="scss" scoped></style>
